<template>
  <div style="height: 100%">
    <el-container>
      <el-main>
        <el-tabs type="border-card">
          <el-tab-pane label="菜单管理">
            <!--form-->
            <el-card class="card-container">
              <el-form :model="menuForm">
                <el-row :gutter="15">
                  <el-col :span="8">
                    <el-form-item label="菜单名称" prop="name">
                      <el-input placeholder="请输入菜单名称" clearable v-model="menuForm.name" />
                    </el-form-item>
                  </el-col>
                  <el-col :span="8">
                    <el-form-item label="状态" prop="enabled">
                      <el-select v-model="menuForm.enabled" placeholder="请选择岗位状态" clearable>
                        <el-option
                          v-for="item in dicts.system_global_status"
                          :key="item.v"
                          :label="item.k"
                          :value="item.v"
                        />
                      </el-select>
                    </el-form-item>
                  </el-col>
                  <el-col :span="8">
                    <el-form-item label="菜单类型" prop="type">
                      <el-select v-model="menuForm.type" placeholder="请选择菜单类型" clearable>
                        <el-option
                          v-for="item in dicts.system_menu_type"
                          :key="item.v"
                          :label="item.k"
                          :value="item.v"
                        />
                      </el-select>
                    </el-form-item>
                  </el-col>
                  <el-col :span="8">
                    <el-button type="primary" icon="search" @click="menuSearch">搜索</el-button>
                    <el-button icon="refresh" @click="menuReset">重置</el-button>
                  </el-col>
                </el-row>
              </el-form>
            </el-card>
            <!--table-->
            <el-card>
              <div class="toolbar">
                <el-button type="primary" icon="plus" @click="menuAdd">新增</el-button>
              </div>
              <el-table
                :data="menuList"
                row-key="id"
                :empty-text="'暂无数据'"
                stripe
                border
                height="40vh"
              >
                <el-table-column prop="name" label="菜单名称" align="left" />
                <el-table-column label="图标" align="center">
                  <template #default="{ row }">
                    <el-icon size="large" v-if="row.icon">
                      <component :is="row.icon.replace('el-icon-', '')" />
                    </el-icon>
                  </template>
                </el-table-column>
                <el-table-column prop="perms" label="权限标识" align="center">
                  <template #default="{ row }">
                    <el-link :underline="false" v-copy="row.perms">{{ row.perms }}</el-link>
                  </template>
                </el-table-column>
                <el-table-column label="菜单类型" align="center">
                  <template #default="{ row }">
                    <template v-for="item in dicts.system_menu_type">
                      <el-tag v-if="row.type == item.v" :key="item.v">{{ item.k }}</el-tag>
                    </template>
                  </template>
                </el-table-column>
                <el-table-column prop="sort" label="排序" align="center" />
                <el-table-column label="显示状态" align="center">
                  <template #default="{ row }">
                    <template v-for="item in dicts.system_global_visibility">
                      <el-tag v-if="row.visible == item.v" :key="item.v">{{ item.k }}</el-tag>
                    </template>
                  </template>
                </el-table-column>
                <el-table-column label="禁用状态" align="center">
                  <template #default="{ row }">
                    <template v-for="item in dicts.system_global_status">
                      <el-tag v-if="row.enabled == item.v" :key="item.v">{{ item.k }}</el-tag>
                    </template>
                  </template>
                </el-table-column>
                <el-table-column
                  prop="createTime"
                  label="创建时间"
                  :formatter="rendererDateTime"
                  width="150"
                />
                <el-table-column label="操作" align="center" fixed="right">
                  <template #default="{ row }">
                    <div class="sys-table-main-actions">
                      <el-link
                        v-auths="'system:menu:update'"
                        icon="edit"
                        type="primary"
                        :underline="false"
                        @click="menuUpdate(row)"
                        >编辑</el-link
                      >
                      <el-link
                        v-auths="'system:menu:delete'"
                        icon="delete"
                        type="danger"
                        style="margin-left: 10px"
                        :underline="false"
                        @click="menuDelete(row.id)"
                        >删除
                      </el-link>
                    </div>
                  </template>
                </el-table-column>
              </el-table>
              <pagination
                :total="total"
                @update:current-page="handleCurrentPageUpdate"
                @update:current-size="handlePageSizeUpdate"
              ></pagination>
            </el-card>
          </el-tab-pane>
        </el-tabs>
      </el-main>
    </el-container>
    <menuDialog
      v-if="dialogVisible"
      @getPage="getPage"
      :dialog-form-id="dialogFormId"
      v-model:dialogVisible="dialogVisible"
    ></menuDialog>
  </div>
</template>
<script lang="ts" setup>
import {
  ref,
  toRefs,
  reactive,
  onBeforeMount,
  getCurrentInstance,
  ComponentInternalInstance
} from 'vue'

import { MenuListItem } from '@interface/menu'

import tool from '@utils/tool'
import { menuTree, IRoleMenuItem } from '@api/role'
import { detleUpdata } from '@api/menu'
import { ElMessage, ElMessageBox } from 'element-plus'

import menuDialog from './menuDialog.vue'

import normalizeMenuList from './normalizeMenuList'
//控制dialog显示
const dialogVisible = ref<boolean>(false)
const state = reactive({
  menuForm: {
    name: '',
    enabled: '',
    type: ''
  },
  menuList: [] as MenuListItem[],
  total: 0,
  dialogFormId: '',

  parentMenuTreeOptions: {
    options: [],
    props: { children: 'children', label: 'name' }
  },
  binForm: {
    size: 10,
    current: 1,
    enabled: 1
  },
  binList: [],
  activeName: 'menulist'
})

const {
  menuForm,
  menuList,
  dialogFormId,
  total,
  // parentMenuTreeOptions,
  binForm,
  // binList,
  activeName
} = toRefs(state)

onBeforeMount(() => {
  const { proxy } = getCurrentInstance() as ComponentInternalInstance
  if (proxy) {
    ;(proxy as any).getDicts([
      'system_menu_type',
      'system_global_visibility',
      'system_global_status'
    ])
  }
  getPage(menuForm.value)
})

interface IPermission {
  treeList: IRoleMenuItem[]
  treeProps: {
    label: string
  }
  linkage: boolean
  openAll: boolean
  selectAll: boolean
}

//菜单树
const permission: IPermission = reactive({
  treeList: [],
  treeProps: {
    label: 'name'
  },
  linkage: true,
  openAll: false,
  selectAll: false
})
const getPage = async (info) => {
  //获取权限菜单数据
  const menuData = await menuTree({
    ...binForm.value,
    ...info.value
  })
  const { data } = menuData
  permission.treeList = data.records
  // normalizeMenuList(records)
  const menuInfo = permission.treeList.map((item) => {
    return {
      id: item.id,
      name: item.name,
      icon: item?.icon,
      perms: item.perms,
      type: item.type,
      sort: item.sort,
      visible: item.visible,
      enabled: item.enabled,
      createTime: item.createTime || undefined
    }
  })
  menuList.value = menuInfo
  total.value = menuData.data.total
}
//搜索
const menuSearch = async () => {
  getPage(menuForm)
}

//分页-页码
const handleCurrentPageUpdate = (current: number) => {
  console.log('current', current)
  binForm.value.current = current
  getPage(menuForm)
}
//分页-一页显示多少条
const handlePageSizeUpdate = (size: number) => {
  binForm.value.size = size
  getPage(menuForm)
}

//重置
const menuReset = () => {
  menuForm.value = {
    name: '',
    enabled: '',
    type: ''
  }
  binForm.value = {
    size: 10,
    current: 1,
    enabled: 1
  }
  getPage(menuForm)
}

//新增
const menuAdd = () => {
  dialogFormId.value = ''

  dialogVisible.value = true
}

//编辑
const menuUpdate = (row) => {
  dialogFormId.value = row.id
  dialogVisible.value = true
}

//删除
const menuDelete = (id) => {
  ElMessageBox.confirm('是否删除菜单信息', {
    type: 'error',
    confirmButtonText: '删除',
    cancelButtonText: '取消'
  })
    .then(async () => {
      const res = await detleUpdata(id)
      if (res.code != 200) {
        ElMessage({
          type: 'error',
          message: res.message
        })
      } else {
        ElMessage({
          type: 'success',
          message: '删除成功'
        })
      }
      getPage(menuForm)
    })
    .catch(() => {
      ElMessage({
        type: 'info',
        message: '取消删除'
      })
    })
}
//标签页
const tagChangeHandler = () => {}

//时间戳转换为标准时间
const rendererDateTime = (row, column, timeValue: number) => {
  return tool.dateFormat(timeValue)
}
</script>

<style scoped>
.card-container,
.toolbar {
  margin-bottom: 15px;
}

.el-table {
  font-size: 12px;
}
</style>
